<template>
  <div class="overflow-x-auto whitespace-nowrap px-4 py-2 bg-green-900 rounded-xl h-80">
    <div class="inline-flex gap-1 items-end mt-8">
      <div
        v-for="card in cards"
        :key="card"
        class="relative cursor-pointer transition-transform duration-200"
        :class="{
          'scale-110 -translate-y-2 z-10': isSelected(card),
          'opacity-80': !isSelected(card)
        }"
        @click="toggle(card)"
      >
        <img
          :src="getCardImage(card)"
          alt="card"
          class="w-32 h-auto rounded shadow-md"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  cards: Array,
  selected: Array
})
const emit = defineEmits(['update:selected'])

function toggle(card) {
  const isSel = props.selected.includes(card)
  const newSelected = isSel
    ? props.selected.filter(c => c !== card)
    : [...props.selected, card]
  emit('update:selected', newSelected)
}

function isSelected(card) {
  return props.selected.includes(card)
}

// 卡牌图片路径映射
function getCardImage(card) {
  const map = {
    '♠': 'S',
    '♥': 'H',
    '♦': 'D',
    '♣': 'C'
  }

  if (card.includes('JOKER')) {
    return `/cards/Joker_${card.includes('黑') ? 'Black' : 'Red'}.svg`
  }

  const match = card.match(/^([2-9JQKA10]+)([♠♥♦♣])$/)
  if (!match) return '/cards/back.svg'
  const [_, value, suit] = match
  return `/cards/${value}${map[suit]}.svg`
}
</script>
